---
title: "Backdrop Opacity"
description: "Utilities for applying backdrop opacity filters to an element."
featureVersion: 'v2.1+'
---

import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin: function () {
    return function ({ addUtilities }) {
      addUtilities({
        '.backdrop-opacity-0': { '--tw-backdrop-opacity': 'opacity(0)'},
        '.backdrop-opacity-5': { '--tw-backdrop-opacity': 'opacity(0.05)'},
        '.backdrop-opacity-10': { '--tw-backdrop-opacity': 'opacity(0.1)'},
        '.backdrop-opacity-20': { '--tw-backdrop-opacity': 'opacity(0.2)'},
        '.backdrop-opacity-25': { '--tw-backdrop-opacity': 'opacity(0.25)'},
        '.backdrop-opacity-30': { '--tw-backdrop-opacity': 'opacity(0.3)'},
        '.backdrop-opacity-40': { '--tw-backdrop-opacity': 'opacity(0.4)'},
        '.backdrop-opacity-50': { '--tw-backdrop-opacity': 'opacity(0.5)'},
        '.backdrop-opacity-60': { '--tw-backdrop-opacity': 'opacity(0.6)'},
        '.backdrop-opacity-70': { '--tw-backdrop-opacity': 'opacity(0.7)'},
        '.backdrop-opacity-75': { '--tw-backdrop-opacity': 'opacity(0.75)'},
        '.backdrop-opacity-80': { '--tw-backdrop-opacity': 'opacity(0.8)'},
        '.backdrop-opacity-90': { '--tw-backdrop-opacity': 'opacity(0.9)'},
        '.backdrop-opacity-95': { '--tw-backdrop-opacity': 'opacity(0.95)'},
        '.backdrop-opacity-100': { '--tw-backdrop-opacity': 'opacity(1)'},
      })
    }
  }
}

## Usage

Use the `backdrop-opacity-{amount}` utilities alongside the `backdrop-filter` utility to control the opacity of other backdrop filters applied to an element.

```html
<div class="backdrop-filter backdrop-opacity-80 ...">
  <!-- ... -->
</div>
```

## Responsive

To control an element's backdrop opacity at a specific breakpoint, add a `{screen}:` prefix to any existing backdrop opacity utility. For example, use `md:backdrop-opacity-lg` to apply the `backdrop-opacity-lg` utility at only medium screen sizes and above.

```html
<div class="backdrop-filter backdrop-opacity-sm **md:backdrop-opacity-lg** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

You can customize which `backdrop-opacity` utilities are generated using the `backdropOpacity` key in the `theme` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       backdropOpacity: {
+         15: '.15',
+       }
+     }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="backdropOpacity" name="backdrop opacity" />

### Disabling

<Disabling plugin="backdropOpacity" name="backdrop opacity" />
